@import './light.module.scss';
@import './dark.module.scss';

%baseStyles {
  border-radius: 0.3rem;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  line-height: 1.5;
  margin: 0.5em 0 var(--space-24) 0;
  overflow: auto;
  padding: 0;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  text-align: left;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

.code {
  @extend %baseStyles;
  font-weight: var(--font-weight-light);
  padding: 0 6px;

  white-space: break-spaces;
}

.pre {
  @extend %baseStyles;

  .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .lang,
    .copy {
      align-items: center;
      display: inherit;
      font-size: var(--font-size-code);
      height: 23px;
      justify-content: center;
      width: 86px;
    }
    .langBox {
      background-color: var(--black4);
      border-radius: 0 0 0.3rem 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100px;

      .lang {
        background-color: var(--black4);
        border-width: 0;
        color: var(--black9);
        width: max-content;
      }
    }

    .copy {
      background-color: var(--black9);
      border-radius: 0 0 0 0.3rem;
      border-width: 0;
      color: white;

      i {
        padding: 0;
      }
    }
  }

  .content {
    margin: 1em;
  }
}

:global(.light) {
  .pre {
    @include lightStyles;
  }

  .code {
    background-color: var(--black2);
    color: var(--black9);
  }

  a .code {
    background-color: transparent;
    color: var(--color-text-accent);
    padding: 0;
  }
}

:global(.dark) {
  .pre {
    @include darkStyles;

    .top {
      span {
        background-color: var(--black3);
        color: var(--black9);
      }

      button {
        background-color: var(--brand8);
        color: white;
      }
    }
  }

  .code {
    background-color: var(--black9);
    color: var(--black2);
  }

  a .code {
    background-color: transparent;
    color: var(--color-text-accent);
    padding: 0;
  }
}
